<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>匀速运动</title>
        <script src="js/move.js"></script>
        <script src="js/common.js"></script>
        <style>
            #div2,#div3,#div5,#div6,#div7 {
                width: 1px;
                height: 200px;
                background: black;
            }
            #div2{
                position: absolute;
                left:100px;
                top: 0;
            }
            #div3{
                position: absolute;
                left:300px;
                top: 0;
            }
            #div5{
                position: absolute;
                left:100px;
                top: 0;
            }
            #div6{
                position: absolute;
                left:300px;
                top: 0;
            }
            #div7{
                position: absolute;
                left:1000px;
                top: 0;
            }
            #div1,#div4{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 50px;
                left: 700px;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center;color: red;position: absolute;left: 50%;top:0;">缓冲运动</h1>
        <div id="div_parent01" style="position: absolute;top:10%;border: 1px solid black;width: 90%;height: 200px">
            <input type="button" value="到100" onclick="moveToTarget(100)"/>
            <input type="button" value="到300" onclick="moveToTarget(300)" />
            <div id="div1"></div>
            <div id="div2"></div>
            <div id="div3"></div>
        </div>
        <h1 style="text-align: center;color: red;position: absolute;left: 50%;top:50%;">匀速运动</h1>
        <div id="div_parent02" style="position: absolute;top:60%;border: 1px solid black;width: 90%;height: 200px">
            <input type="button" value="到100" onclick="moveToTarget2(100)"/>
            <input type="button" value="到300" onclick="moveToTarget2(300)" />
            <input type="button" value="到1000" onclick="moveToTarget2(1000)" />
            <div id="div4"></div>
            <div id="div5"></div>
            <div id="div6"></div>
            <div id="div7"></div>
        </div>
    </body>
</html>
<script>
    function moveToTarget(target) {
        var div1 = document.getElementById("div1");
        bufferingMotion(div1,"left",target);
    }
    function moveToTarget2(target) {
        var div4 = document.getElementById("div4");
        uniformMotion(div4,"left",target,-7);
    }
</script>